<template>
  <div class="">
    <messageBoard></messageBoard>
    <banner></banner>

    <!--PC内容-->
    <div class="pc_home_page">
      <!--智能门店解决方案 interests-->
      <div class="join_interests">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">智能门店解决方案</p>
          <div class="plan_swiper_box clear">
            <!--左箭头-->
            <div class="swiper_btn_box float_left">
              <div class="swiper-button-prev swiper-button-white swiper_btn"></div>
            </div>
            <!--swiper 内容-->
            <div class="swiper-container swiper_shop_plan float_left">
              <div class="swiper-wrapper" id="shop_swiper_wrapper">
                <div class="swiper-slide">
                  <img src="http://image.xuemei99.com/huoke_pic_home.jpg" alt="">
                  <div class="slide_text">
                    <p class="font_18 col_333 margin_top_12">智能获客解决方案</p>
                    <p class="font_14 col_666">助力企业智能获客智能营销</p>
                  </div>
                  <div class="scroll_box">
                    <p class="font_36">获客宝</p>
                    <router-link to="/huoke"><button type="button" class="detail_scroll_btn">了解详情</button></router-link>
                  </div>
                </div>
                <div class="swiper-slide">
                  <img src="http://image.xuemei99.com/sale_pic_home.jpg" alt="">
                  <div class="slide_text">
                    <p class="font_18 col_333 margin_top_12">智能销售解决方案</p>
                    <p class="font_14 col_666">助力中小企业有效沟通智能销售</p>
                  </div>
                  <div class="scroll_box">
                    <p class="font_36">销售宝</p>
                    <router-link to="/market"><button type="button" class="detail_scroll_btn">了解详情</button></router-link>
                  </div>
                </div>
                <div class="swiper-slide">
                  <img src="http://image.xuemei99.com/tuiguang_pic_home.jpg" alt="">
                  <div class="slide_text">
                    <p class="font_18 col_333 margin_top_12">智能推广解决方案</p>
                    <p class="font_14 col_666">助力中小企业招聘吸粉活动推广</p>
                  </div>
                  <div class="scroll_box">
                    <p class="font_36">推广宝</p>
                    <router-link to="/"><button type="button" class="detail_scroll_btn">了解详情</button></router-link>
                  </div>
                </div>
                <div class="swiper-slide">
                  <img src="http://image.xuemei99.com/kelianke_pic_home.jpg" alt="">
                  <div class="slide_text">
                    <p class="font_18 col_333 margin_top_12">异业联盟获客方案</p>
                    <p class="font_14 col_666">让商家和商家的顾客连通起来</p>
                  </div>
                  <div class="scroll_box">
                    <p class="font_36">客连客</p>
                    <router-link to="/kelianke"><button type="button" class="detail_scroll_btn">了解详情</button></router-link>
                  </div>
                </div>
              </div>
            </div>
            <!--右箭头-->
            <div class="swiper_btn_box float_left">
              <div class="swiper-button-next swiper-button-white swiper_btn swiper_right_btn"></div>
            </div>
          </div>
        </div>
      </div>
      <!--服务案例 case-->
      <div class="jion_aptitude bg_F4F6F9 aptitude_box">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">服务案例</p>
          <ul class="aptitude_box margin_top_60 clear">
            <li class="item_case item_case1 bg_fff">
              <img src="http://image.xuemei99.com/case1_pic_home.jpg" alt="">
              <div class="case_text">
                减价、秒杀、拼团、团购...学妹针对不同商家情况制定不同的获客机制，多元化的模板，有效的营销插件，增加了克丽缇娜新老客户的粘性与活跃性，学妹获客，快捷有效。
              </div>
            </li>
            <li class="item_case item_case2 bg_fff">
              <img src="http://image.xuemei99.com/case2_pic_home.jpg" alt="">
              <div class="case_text">
                旗下12个儿童摄影品牌，全国50多家直营门店，拥有50000平方独立影棚”学妹助力，两天获客2000多人，真实、热情、专注、创新，正是学妹科技前进的根本。
              </div>
            </li>
            <li class="item_case item_case3 bg_fff">
              <img src="http://image.xuemei99.com/case3_pic_home.jpg" alt="">
              <div class="case_text">
                领导品牌，航行未来，佐登妮丝致力于寻找让女人更美丽的方法，学妹科技致力于帮助企业店家用互联网的方式做获客及营销活动，立志为企业店家提供优质、省心的服务。
              </div>
            </li>
            <li class="item_case item_case4 bg_fff">
              <img src="http://image.xuemei99.com/case4_pic_home.jpg" alt="">
              <div class="case_text">
                云南美的朵儿，从学妹初创一直信赖学妹产品，从当初一家店到现在成为行业中的标杆，荣获2018年学妹科技优秀企业店家称号。
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!--战略合作 cooperation-->
      <div class="bg_fff aptitude_box cooperation_box">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">战略合作</p>
          <ul class="cooperation_ul margin_top_60 clear">
            <li class="item_case item_cooperation1 bg_fff"></li>
            <li class="item_case item_cooperation2 bg_fff"></li>
            <li class="item_case item_cooperation3 bg_fff"></li>
            <li class="item_case item_cooperation4 bg_fff"></li>
          </ul>
        </div>
      </div>
      <!--<Foot></Foot>-->
    </div>

    <!--移动端内容-->
    <div class="mobile_home_page">

      <!--智能门店解决方案-->
      <div class="bg_fff mobile_shop_plan">
        <p class="font_20 mobile_item_title">智能门店解决方案</p>

        <ul class="mobile_plan_ul clear">
          <li>
            <router-link to="/huoke"><img src="http://image.xuemei99.com/huoke_pic_home.png" alt=""></router-link>
            <p class="font_14 margin_top_10">智能获客解决方案</p>
            <p class="font_12 col_666 single_line">助力企业智能获客智能营销</p>
          </li>

          <li>
            <router-link to="/market"><img src="http://image.xuemei99.com/sale_pic_home.png" alt=""></router-link>
            <p class="font_14 margin_top_10">智能销售解决方案</p>
            <p class="font_12 col_666 single_line">助力中小企业有效沟通智能销售</p>
          </li>
          <li>
            <router-link to="/"><img src="http://image.xuemei99.com/tuiguang_pic_home.png" alt=""></router-link>
            <p class="font_14 margin_top_10">智能推广解决方案</p>
            <p class="font_12 col_666 single_line">助力中小企业招聘吸粉活动推广</p>
          </li>
          <li>
            <router-link to="/kelianke"><img src="http://image.xuemei99.com/tuiguang_pic_home.png" alt=""></router-link>
            <p class="font_14 margin_top_10">异业联盟获客方案</p>
            <p class="font_12 col_666 single_line">让商家和商家的顾客连通起来</p>
          </li>
        </ul>
      </div>

      <!--服务案例-->
      <div class="mobile_shop_case">
        <p class="font_20 mobile_item_title">服务案例</p>
        <div class="margin_top_20 mobile_plan_bg">
          <img src="http://image.xuemei99.com/example_pic_home.png" alt="">
        </div>
      </div>

      <!--战略合作-->
      <div class="margin_bottom_20 mobile_shop_case">
        <p class="font_20 mobile_item_title">战略合作</p>
        <div class="margin_top_20 mobile_cooperation_bg">
          <img src="http://image.xuemei99.com/cooprate_pic_home.png" alt="">
        </div>
      </div>
    </div>

    <!--foot-->
    <Foot></Foot>
  </div>
</template>

<script>
  //引入
  import Foot from '@/components/foot/foot'
  import banner from '@/components/banner/banner'
  import messageBoard from '@/components/messageBoard/messageBoard'
  //抛出
  export default {
    name: 'home',
    //注册组件
    components:{
        banner,
      messageBoard,
      Foot
    },
    //在模板渲染之前调用
    created (){

    },
    //在模板渲染之后调用
    mounted () {
      var mySwiper = new Swiper('.swiper_shop_plan', {
        autoplay: false,//可选选项，自动滑动
        loop: false,
        freeMode : true,
        clickable: true,
        slidesPerView: 3,
        slidesPerGroup : 3,
        slidesOffsetBefore : 0,
        spaceBetween : 40,//在slide之间设置距离
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        //滑到最后一个隐藏前进按钮
//        on: {
//          slideChangeTransitionEnd: function () {
//            if (this.isEnd) {
//              this.navigation.$nextEl.css('opacity', '0');
//            } else {
//              this.navigation.$nextEl.css('opacity', '1');
//            }
//          },
//        },
      });

      /**
       * 悬浮前进后退按钮
       * 悬浮：显示
       * 移走：隐藏
       * **/
      $(".swiper_btn_box").hover(function () {
          $(this).css("opacity","1")
      },function () {
          $(this).css("opacity","0")
      });




      //悬浮智能门店解决方案
      $(".swiper_shop_plan .swiper-slide").hover(function () {
        $(this).find('.scroll_box').stop().animate({top: 0}, 500);
      },function () {
          $(this).find('.scroll_box').stop().animate({top: 240}, 500);
      });

      //悬浮服务案例
      $(".aptitude_box li").hover(function () {
        $(this).find('img').stop().animate({width: 140}, 500);
        $(this).find('.case_text').stop().animate({top: 86}, 500);
      },function () {
          $(this).find('img').stop().animate({width: 100 + "%"}, 500);
        $(this).find('.case_text').stop().animate({top: 240}, 500);
      })


    },
  }


</script>

<style scoped>
  ::-webkit-scrollbar { /*隐藏滚轮*/
    display: none;
  }
  .plan_swiper_box{
    width: 1180px;
    margin: 40px auto 0px auto;
    position: relative;
  }

  .swiper_shop_plan{
    width: 980px;
  }
  #shop_swiper_wrapper{
    width: 980px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

  .swiper_shop_plan .swiper-slide{
    box-shadow: 0px 4px 10px #EAECF0;
    height: 240px;
    overflow: hidden;
  }
  .swiper_shop_plan .swiper-slide img{
    width: 100%;
    height: 160px;
  }
  .scroll_box{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 230px;
    z-index: 999;
    background-color: #ffffff;
    padding-top: 70px;
  }
  .swiper_btn_box{
    width: 100px;
    height: 100px;
  }
  .swiper_btn{
    width: 60px;
    height: 60px;
    background-color: rgba(51,51,51,.1);
    position: inherit;
    top: inherit;
    margin-top: 80px;
  }
  .swiper_right_btn{
    margin-left: 40px;
  }
  .detail_scroll_btn{
    width: 116px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #ffffff;
    background-color: #2577EF;
  }
  .detail_scroll_btn a{
    color: #ffffff;
  }

  .join_interests,.jion_aptitude,.cooperation_box,.join_flow{
    padding: 60px 0;
  }

  .plan_img_box img{
    width: 100%;
    height: 100%;
  }
  .aptitude_box{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .item_case{
    float: left;
    width: 280px;
    height: 240px;
    margin-left: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0px 4px 10px #EAECF0;
  }
  .aptitude_box li:first-child{
    margin-left: 0;
  }
  .item_case img{
    width: 100%;
  }
  .case_text{
    position: absolute;
    top: 240px;
    font-size: 14px;
    text-align: left;
    padding: 0px 20px;
  }


  .cooperation_ul{
    padding-left: 0;
    padding-right: 0;
  }
  .cooperation_ul li:first-child{
    margin-left: 0;
  }
  .item_cooperation1{
    background-image: url("http://image.xuemei99.com/cooprate1_pic_home.jpg");
  }
  .item_cooperation2{
    background-image: url("http://image.xuemei99.com/cooprate2_pic_home.jpg");
  }
  .item_cooperation3{
    background-image: url("http://image.xuemei99.com/cooprate3_pic_home.jpg");
  }
  .item_cooperation4{
    background-image: url("http://image.xuemei99.com/cooprate4_pic_home.jpg");
  }
  .mobile_home_page{

  }
  .mobile_shop_plan{
    padding-left: 15px;
    padding-right: 15px;
  }
  .mobile_item_title{
    margin-top: 40px;
    margin-bottom: 10px;
  }
  .mobile_plan_ul{
    width: 100%;
    padding: 0;
  }
  .mobile_plan_ul li{
    width: calc(50% - 7.5px);
    margin-left: 15px;
    box-shadow: 0 3px 6px #EAECF0;
    margin-top: 20px;
  }
  .mobile_plan_ul li img{
    width: 100%;
  }
  .mobile_plan_ul li:nth-child(odd){
    margin-left: 0;
  }
  .mobile_plan_bg img,.mobile_cooperation_bg img{
    width: 100%;
  }

</style>
